<%@page import="com.nebula.common.Const"%>
<%@page import="java.net.URLDecoder"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="static/html5shiv.js"></script>
<script type="text/javascript" src="static/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/share/cover.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/magic-radio.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/share/share-all.css" />
<!--[if IE 6]>
<script type="text/javascript" src="static/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>分享形式</title>
<style type="text/css">
	.col{margin-top:20px}
	.col h4{height:40px;line-height:40px}
	.opt{height:30px;line-height:24px;display: inline-block;padding-top: 5px;margin-left: 40px}
	.tip{padding-left:15px;font-size: 12px;color: #8b909e}
	.content{
		margin-left: 20px;
	}
	.url{
		display: inline-block;
		position: relative;
	}
	.share-url-border{
		border:1px solid #e9e9e9;
		border-radius:4px;
		display:inline-block;
		width: 365px;
		height: 35px;
        vertical-align: middle;
        *position: absolute;
        *top: 50%;
        margin-top: 20px;
	}
	.share-url {
		border:none;
		font-size: 12px;
		width:256px;
		height: 35px;
		padding-left:8px;
		color: rgb(102, 102, 102);
	}
	.share-validity-zip{
		color: #818796;
		font-size: 14px
	}
	.copy-button{
		float: right;
		margin-left: 8px;
		margin-top: 20px;
	}
	.private{
		color: #368cff;
		font-size: 16px;
		position: relative;
	}
	.copy-tips,.copy-tips1{
		text-align: center;
		color: #3b8cff;
		font-size: 13px;
	}
	.password{
		display: block;
		margin-top: 10px;
	}
	.share-password{
		width:40px;
		height: 19px;
		line-height: 18px;
		padding: 8px;
		border: 1px solid #e9e9e9;
		border-radius: 4px;
		display: inline-block;
	}
	.g-button-right{
		padding-right: 15px;
		padding-left: 15px;
	}
	.a-right{
		float: right;
		margin-right: 15px;
	}
	.pointer{
		cursor: pointer;
	}
	.footer1{
    position: absolute;
    bottom: 45px;
    padding: 0 15px;
    width: 500px;
}
</style>
</head>

<body>
<input type="hidden" value="<%=request.getParameter("valArr")%>" id="valArr">
<input type="hidden" value="<%=URLDecoder.decode(request.getParameter("title"),"utf-8") %>" id="title">

<div style="height: 320px;">
	<div style="background: #f7faff;width:auto;">
		<div class="opt">
			<input class="regular-radio" id="url-share" type="radio"
			 name="share-type" value="链接分享" checked="checked">
			<label for="url-share" class="pointer">链接分享</label>
		</div>
		<div class="opt" style="margin-left: 20px">
			<input class="regular-radio" id="friends-share" type="radio"
			 name="share-type" value="发给好友">
			<label for="friends-share" class="pointer">发给好友</label>
		</div>
	</div>
	<div style="margin-top: 40px;margin-left: 40px">
		<div id="url" style="display:inline-block;width: 100%">
			<div>
				<span>分享形式</span>
				<div class="opt" style="display: block;margin-left: 100px;margin-top: -25px">
					<input type="radio" class="regular-radio" id="encryption" name="choose-type" value="private" checked="checked">
					<label for="encryption" class="pointer">加密</label>
					<span class="tip">仅限拥有密码者可查看，更加隐私安全</span>
				</div>
				<div class="opt" style="display: block;margin-left: 100px">
					<input type="radio" class="regular-radio" id="public" name="choose-type" value="public">
					<label for="public" class="pointer">公开</label>
					<span class="tip">任何人可查看或下载</span>
				</div>
			</div>
			<div style="margin-top: 50px">
				<span>有效期</span>
				<select class="select" size="1" name="validity"
					style="width: 100px;height: 30px;margin-left: 50px" title="" id="validity">
					<option value="永久有效" selected="selected">永久有效</option>
					<option value="7">7天</option>
					<option value="1">1天</option>
				</select>
			</div>
			<div class="mt-50">
				<span style="margin-left: 300px">
					<a class="btn btn-primary radius" id="create-url" href="javascript:;">创建链接</a>
					<a class="btn btn-secondary-outline radius ml-10" data-title="取消" data-href="#" id="closeBtn" onclick="closeLayer()" href="javascript:;" >取消</a>
				</span>
			</div>
		</div>
	</div>
	<ul class="content" id="url-content" style="display: none;">
		<li>
			<div>
				<span class="private">
					<i class="Hui-iconfont" style="font-size: 20px">&#xe6a8;</i>
					成功创建私密链接
				</span>
			</div>
		</li>
		<li>
			<div class="url">
				<div id="link-info" class="share-url-border">
					<input type="text" class="share-url" readonly="readonly" spellcheck="false" id="text-url">
					<span style="color: rgb(102, 102, 102)">|</span>
					<span class="share-validity-zip">链接永久有效</span>
				</div>
				<div class="copy-button">
					<a id="btnCopy" class="btn btn-primary radius" href="javascript:;" style="height: 35px;text-align: center;">
						复制链接及密码
					</a>
					<div class="copy-tips" style="display: none;">复制链接成功</div>
				</div>
			</div>
			<div class="password">
				<span>提取密码 </span>
				<input type="text" id="text-key" class="share-password" spellcheck="false" readonly="readonly">
			</div>
		</li>
		<li style="padding-top: 25px;">
			<span style="color: rgb(102, 102, 102);font-size: 13px;">可以将链接通过QQ、微博、人人网、QQ空间等方式分享给好友</span>
		</li>
		<li>
			<a class="btn btn-secondary-outline radius ml-10 a-right" onclick="closeLayer()">
				<span class="g-button-right">关闭</span>
			</a>
		</li>
	</ul>
	<ul class="content" id="public-content" style="display: none;">
		<li>
			<div>
				<span class="private">
					<i class="Hui-iconfont" style="font-size: 20px">&#xe6a8;</i>
					成功创建公开链接
				</span>
			</div>
		</li>
		<li>
			<div class="url">
				<div id="link-info" class="share-url-border">
						<input type="text" class="share-url" readonly="readonly" spellcheck="false" id="public-url">
						<span style="color: rgb(102, 102, 102)">|</span>
						<span class="share-validity-zip">链接永久有效</span>
				</div>
				<div class="copy-button">
					<a id="btnCopy1" class="btn btn-primary radius" href="javascript:;" style="height: 35px;text-align: center;">
						复制链接
					</a>
					<div class="copy-tips1" style="display: none;">复制链接成功</div>
				</div>
			</div>
		</li>
		<li style="padding-top: 25px;">
			<span style="color: rgb(102, 102, 102);font-size: 13px;">可以将链接通过QQ、微博、人人网、QQ空间等方式分享给好友</span>
		</li>
		<li>
			<a class="btn btn-secondary-outline radius ml-10 a-right" onclick="closeLayer()">
				<span class="g-button-right">关闭</span>
			</a>
		</li>
	</ul>
	<div class="share-dialog" style="margin-top: -40px;height: 320px;display: none;">
		<ul class="content" id="friends-content" style="height: 320px">
			<li class="share-friend" style="display: block;">
				<div id="sharefriendBox" class="share-friend-box">
					<p class="title">
						<span id="shareTitle">选择好友分享文件，一次最多50人</span>
					</p>
					<div class="content global-clearfix" style="margin-left: 0px;margin-top: -20px;">
						<div class="left-side">
							<div id="contactBox" class="contact-box">
								<div id="friendBox" class="contact-group" style="display: block;">
									<ul class="tree-list">
										<li class="mboxOfFriend step-0">
											<div class="title">
												<em class="icon"></em>好友<span class="number"></span>
											</div>
											<ul style="display: none;"></ul>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<div class="right-side">
							<div id="selectedList">
								<div class="selected-box">
									<p class="title" id="descTitle">
										已选择<span class="share-num" id="shareNum">0</span>个收件人
									</p>
									<ul class="select-list" style="margin-top: -24px;">
										<div class="none global-center" style="display: block;">
											<span style="margin-left: -30px;">你还没有选择好友</span>
										</div>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</li>
		</ul>
		<div class="footer1">
			<span style="margin-left: 300px">
				<a class="btn btn-primary radius" id="btnOk" href="javascript:;">&nbsp;&nbsp;&nbsp;&nbsp;分享&nbsp;&nbsp;&nbsp;&nbsp;</a>
				<a class="btn btn-secondary-outline radius ml-10" data-title="关闭" data-href="#" id="btnExit" href="javascript:;" onclick="closeLayer()">&nbsp;&nbsp;&nbsp;&nbsp;关闭&nbsp;&nbsp;&nbsp;&nbsp;</a>
			</span>
		</div>
	</div>
</div>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="${pageContext.request.contextPath}/static/layer/2.4/layer.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/clipboard.min.js"></script>
<script type="text/javascript">
$(function(){
	var _friends;
	
	$.ajax({
		type: "post",
		url: "/nebula/friends/get-friends-count.action",
		dataType: "json",
		success : function(_data){
			$(".number").html("(" + _data.data + ")");
		}
	});
	
	friendsInfo = function(){
		$.ajax({
			type: "post",
			url: "/nebula/friends/friend-list.action",
			dataType: "json",
			async : false,
			success : function(_data){
				_friends =  _data.data;
				var html = "";
				$.each(_data.data,function(index,content){
					if(content.remark != null){
						html +=
						'<li class="step-1">'
							+'<div class="label" style="display: block;"></div>'
							+'<div class="uinfo">'
								+'<img alt="" src="/nebula/static/avatars/user.jpg" class="avatar">'
								+'<span style="margin-left: -20px;" title="'+content.remark+'">'+content.remark+'</span>'
							+'</div>'
						+'</li>';
					}else if(content.nickname != "-"){
						html +=
						'<li class="step-1">'
							+'<div class="label" style="display: block;"></div>'
							+'<div class="uinfo">'
								+'<img alt="" src="/nebula/static/avatars/user.jpg" class="avatar">'
								+'<span style="margin-left: -20px;" title="'+content.nickname+'">'+content.nickname+'</span>'
							+'</div>'
						+'</li>';
					}else{
						html +=
						'<li class="step-1">'
							+'<div class="label" style="display: block;"></div>'
							+'<div class="uinfo">'
								+'<img alt="" src="/nebula/static/avatars/user.jpg" class="avatar">'
								+'<span style="margin-left: -20px;" title="'+content.encryptionName+'">'+content.encryptionName+'</span>'
							+'</div>'
						+'</li>';
					}
				});
				
				$(".mboxOfFriend ul").html(html);
			}
		});
	};
	
	$("#text-url").mouseover(function(){
		$(this).select();
	});
	
	$("#public-url").mouseover(function(){
		$(this).select();
	});
	
	$("#btnCopy").click(function(){
		var clipboard = new Clipboard('#btnCopy',{
			text : function(trigger){
				var url = $("#text-url").val(),
				key = $("#text-key").val();
				var content = "链接：" + url + "\n" + "密码：" + key;
				return content;
			}
		});
		clipboard.on('success',function(){
			$(".copy-tips").show();
		});
	});
	
	$("#btnCopy1").click(function(){
		var clipboard = new Clipboard('#btnCopy1',{
			text : function(trigger){
				var url = $("#public-url").val(),
				content = "链接：" + url;
				return content;
			}
		});
		clipboard.on('success',function(){
			$(".copy-tips1").show();
		});
	});
	
	$("#create-url").click(function(){
		var type = $("input[name=choose-type]:checked").val();
		var i;
		$.ajax({
			type: "post",
			url: "/nebula/share/getURLAndKey.action",
			beforeSend : function(){
				i = layer.msg('正在创建分享链接，请稍后...', {icon: 16,shade: [0.5, '#f5f5f5'],scrollbar: false,offset: '0px', time:100000}) ;
			},
			data: {
				valArr : $("#valArr").val(),
				title : $("#title").val(),
				failtime : $("#validity").val(),
				type : function(){
					return type;
				}
			},
			dataType : "json",
			success: function(data){
				if(data.status == 0){
					layer.close(i);
					var doamin_name = '<%=Const.DOMAIN_NAME%>'
					if(type == "private"){
						$("#text-url").val(doamin_name + "/" + data.data.URL);
						$("#text-url").attr("title",doamin_name + "/" + data.data.URL);
						$("#text-key").val(data.data.KEY);
						$("#url-content").show();
						$("#url").hide();
					}else{
						$("#public-url").val(doamin_name + "/" + data.data.URL);
						$("#public-url").attr("title",doamin_name + "/" + data.data.URL);
						$("#public-content").show();
						$("#url").hide();
					}
				}else {
					layer.close(i);
					layer.msg(data.msg,{offset:['0',''],icon: 2,time:1000});
				}
			}
		});
	});
	
	$(".regular-radio").click(function(){
		if($(this).val() === "链接分享"){
			$("#url").show();
			$("#public-content").hide();
			$("#url-content").hide();
			$(".share-dialog").hide();
		}else if($(this).val() === "发给好友"){
			$("#url").hide();
			$("#public-content").hide();
			$("#url-content").hide();
			$(".share-dialog").show();
			friendsInfo();
		}
	});
	
	$(".mboxOfFriend").hover(function(){
		if(!$(this).hasClass("open")){
			$(this).addClass("on");
		}
	},function(){
		if(!$(this).hasClass("open")){
			$(this).removeClass("on");
		}
	});
	
	$(".mboxOfFriend .title").click(function(){
		if($(this).parent().hasClass("open")){
			$(this).parent().removeClass("open");
			$(this).parent().addClass("on");
			$(this).parent().find("ul").hide();
		}else{
			$(this).parent().addClass("open");
			$(this).parent().removeClass("on");
			$(this).parent().find("ul").show();
		}
	});
	
	$(".mboxOfFriend").on("mouseenter",".step-1",function(){
		$(".mboxOfFriend .step-1").removeClass("on");
		$(this).addClass("on");
	});
	
	$(".mboxOfFriend").on("mouseleave",".step-1",function(){
		$(".mboxOfFriend .step-1").removeClass("on");
	});
	
	$(".mboxOfFriend").on("click",".step-1",function(){
		var li_count = $(this).index();
		if($(this).find(".label").hasClass("label-on")){
			$(this).find(".label").removeClass("label-on");
			$(".share-num").html($(".label-on").length);
			$(".select-list").find(".item").each(function(i){
				if($(this).attr("id") == li_count){
					$(this).remove();
				}
			});
		}else{
			$(this).find(".label").addClass("label-on");
			$(".share-num").html($(".label-on").length);
			$(".none").hide();
			$(".select-list").append(
				'<li class="item" id="'+$(this).index()+'">'
					+'<div class="label-box">'
						+'<div class="label label-dis" style="display: block;" id="'+$(this).index()+'"></div>'
					+'</div>'
					+'<div class="uinfo g-clearfix" title="'+$(this).find(".uinfo span").html()+'">'
						+'<img src="/nebula/static/avatars/user.jpg" width="23" height="23" class="avatar">'
						+'<span class="uname" style="margin-left: -20px;">'+$(this).find(".uinfo span").html()+'</span>'
					+'</div>'
				+'</li>'
			);
		}
		
		if($(".label-on").length == 0){
			$(".none").show();
		}
	});
	
	$(".select-list").on("click",".label-dis",function(){
		var id = $(this).attr("id");
		$(".mboxOfFriend .step-1").eq(id).click();
	});
	
	$("#btnOk").click(function(){
		var friends = [];
		$(".select-list .item").each(function(i){
			console.log($(this).attr("id"));
			friends[i] = _friends[$(this).attr("id")].username;
		});		
		$.ajax({
			type: "post",
			url: "/nebula/friends/pl-share-file.action",
			data: {
				friendname : function(){
					return friends;
				},
				title: $("#title").val(),
				valArr : $("#valArr").val(),
			},
			dataType: "json",
			success: function(_data){
				if(_data.status == 0){
					parent.layer.msg("分享成功，你可以在<b><u>好友分享</b>中查看详情",{icon:1,offset: "t",time:2000});
					$("#btnExit").click();
				}else{
					parent.layer.msg(_data.msg,{icon:2,offset: "t",time:2000});
				}
			}
		});
	});
});
	
function closeLayer(){
	var index = parent.layer.getFrameIndex(window.name);
	parent.layer.close(index);
}
</script>
</body>
</html>
